<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>退款审核</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
    <style>
       .head {
        font-size:16px;
        font-weight:bold;
    }
    .wenzi4 {
        color: #999999;
        margin-left: 15px;
    }
    .goods {
        margin-top:15px;
    }
    .item {
        display:flex;
        align-items:center;
    }
    .itemimg {
        width: 80px;
        height: 80px;
    }

    .item {
        width:300px;
    }
    .num {
        flex:1;
        text-align:right;
    }
    .wenzi1 {
        font-size: 14px;
    }

    .wenzi2 {
        font-size: 13px;
        color: #999999;
    }

    .wenzi3 {
        font-size: 14px;
        font-weight: bold;
        color: #EE5555;
    }
    .audit {
        margin-left:30px;
    }
    .aduitmemo {
        margin-left: 30px;
    }
    </style>
</head>

<body>
    <div class="layui-fluid box">
        <div class="layui-form" lay-filter="ruleinfo" style="padding: 0px 0px 0 0;">
            <div class="layui-card">
                <div class="layui-card-body box" id="tempdiv">

                </div>
                <div class="audit">
                    <input type="radio" name="AuditStatus" value="1" checked title="通过" />
                    <input type="radio" name="AuditStatus" value="2" title="不通过" />
                </div>
                <div class="aduitmemo">
                    <textarea name="AuditMemo" style="height:100px;width:500px;"></textarea>
                </div>
            </div>
        </div>
    </div>
    <script id="demo" type="text/html">
    <div class="head">退款信息</div>
    <div><text>退款编号：</text><text class="wenzi4" name="RefundNo">{{d.refund.RefundNo}}</text></div>
    <div><text>退款类型：</text><text class="wenzi4" name="RefundType">{{d.refund.RefundTypetxt}}</text></div>
    <div><text>退款状态：</text><text class="wenzi4" name="RefundStatus">{{d.refund.RefundStatustxt}}</text></div>
    <div><text>退款金额：</text><text class="wenzi4" name="RefundFee">{{d.refund.RefundFee}}</text></div>
    <div><text>备    注：</text><text class="wenzi4" name="RefundMemo">{{d.refund.RefundMemo||""}}</text></div>
    <div id="imgDiv">
        {{#  layui.each(d.refund.imglist, function(index, item){ }}
        <img data-idx="{{index}}"  class="itemimg" src="{{item}}" />
        {{#  }) }}
    </div>
    <div class="goods">
        <div class="head">商品信息</div>
        <div id="goodslist">
            {{#  layui.each(d.goodslist, function(index, item){ }}
            <div class="item">
                <div style="width: 80px;text-align: center;">
                    <image class="itemimg" src="{{item.SpecImg}}"></image>
                </div>
                <div style="margin-left: 10px;height: 80px;">
                    <div class="wenzi1">{{ item.GoodsName }}</div>
                    <div class="wenzi2">规格：{{ item.SpecName }}</div>
                    <div class="wenzi3">￥{{ item.GoodsPrice }}</div>
                </div>
                <div class="num">x{{ item.GoodsNum }}</div>
            </div>
            {{#  }) }}
        </div>
    </div> 
</script>
    <script>
        layui.config({
            base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        });
        layui.define(["index", "form", "table", "jquery", "layer", "tree", "element", "laytpl"], function (exports) {
            var layer = layui.layer;
            var admin = layui.admin;
            var $ = layui.$;
            var form = layui.form;
            var laytpl = layui.laytpl;
            var oper = {
                data: {
                    model: {},
                    sellistinfo: {},
                    goodslist: [],
                    refundstatus: [],
                    //退款状态 0退款中 1审核通过 2确认寄回 3确认收货  4退款成功 99审核拒绝
                    refundtype: [],//退款类型 1退款 2退货退款 3全部退款
                    type: 0,//0编辑 1详情
                },
                init: function () {
                    var self = this;
                    self.data.sellistinfo = parent.sellistinfo;
                    self.data.sellistinfo.imglist = (self.data.sellistinfo.Imgs || "").split(',').filter(a => { return a != "" });
                    self.data.refundstatus = parent.refundstatus;
                    self.data.refundtype = parent.refundtype;
                    var filter = self.data.refundtype.filter(a => { return a.Code == self.data.sellistinfo.RefundType; });
                    if (filter != null && filter.length > 0)
                        self.data.sellistinfo.RefundTypetxt = filter[0].Name;

                    var filter = self.data.refundstatus.filter(a => { return a.Code == self.data.sellistinfo.RefundStatus; });
                    if (filter != null && filter.length > 0)
                        self.data.sellistinfo.RefundStatustxt = filter[0].Name;
                    self.initdata();
                    self.initEvent();
                },
                //获取树结构
                initdata: function () {
                    var self = this;
                    Promise.all([self.getRefundGoodsList()]).then(res => {
                        self.data.goodslist = res[0].data.goodslist;
                        var getTpl = demo.innerHTML
                            , view = document.getElementById('tempdiv');
                        laytpl(getTpl).render({
                            refund: self.data.sellistinfo,
                            goodslist: self.data.goodslist
                        }, function (html) {
                            view.innerHTML = html;
                        });
                    })
                },
                initSelect: function (data, name) {
                    var appendHtml = '';
                    appendHtml = "<option value='-1'>全部</option>";
                    data.forEach(a => {
                        appendHtml += "<option value=" + a.Code + ">" + a.Name + "</option>";
                    })
                    $("[name=" + name + "]").html(appendHtml);
                },
                //页面加载
                initEvent: function () {
                    var self = this;
                    parent.getResult = function () {
                        self.data.model = {
                            AuditStatus: $("[name='AuditStatus']:checked").val(),
                            AuditMemo: $("[name='AuditMemo']").val(),
                            RefundNo: self.data.sellistinfo.RefundNo
                        };
                        return self.data.model;
                    }
                    $('#tempdiv').on('click', ".itemimg", function (e) {
                        var idx = $(this).data("idx");
                        self.prewImg(idx);
                    });
                },
                /***
                * 图片放大
                * */
                prewImg(idx) {
                    var joson = {
                        "title": "", //相册标题
                        "id": 123, //相册id
                        "start": idx, //初始显示的图片序号，默认0
                        "data": [   //相册包含的图片，数组格式

                        ]
                    }
                    this.data.sellistinfo.imglist.forEach(a => {
                        joson.data.push({ src: a });
                    })
                    layer.photos({
                        photos: joson,// "#imgDiv"
                        shadeclose: false,
                        closebtn: 2,
                        anim: 5
                    });
                },
                /**
                 * 查询退款商品信息
                 * */
                getRefundGoodsList: function () {
                    var self = this;
                    return new Promise((resolve, reject) => {
                        admin.req({
                            url:self.getbaseurl("Mall.GetRefundGoodsList"),
                            method: "get",
                            data: { refundNo: self.data.sellistinfo.RefundNo },
                            done: res => {
                                if (res.code == 0) {
                                    resolve(res);
                                } else {
                                    reject(res);
                                }
                            }
                        })
                    });
                },
                //获取应用字典
                GetDict: function (classId) {
                    return new Promise((resolve, reject) => {
                        admin.req({
                            url: '/common/v1/BasicData/GetAppBaseDict',
                            method: "get",
                            data: {
                                classId: classId,
                                appKey: "APP20200616102057595"
                            },
                            done: res => {
                                resolve(res);
                            }
                        });
                    })
                },
                getbaseurl: function (fun) {
                    var url = "/lowcode/APP20200616102057595/shop/?view=layui&fun=" + fun;
                    return url;
                },
            }
            oper.init()
        });
    </script>
</body>

</html>